<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id = 'app'>
     <table border="1px">
        <tr>
            <th>#</th>
            <th>名称</th>
            <th>链接</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        <tr v-color="index" v-for="(item,index) in arr" :key="item.id" :style="item.color">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.lian}}</td>
            <td>{{item.xiang}}</td>
            <td><button @click="fn(item.id)">删除</button></td>
        </tr>
     </table>
        <input type="text" v-model = 'a'>
        <input type="text" v-model = 'b'>
        <input type="text" v-model = 'c'>
        <button @click="tian()">添加</button>
     <input type="text" v-model.number = "e"> 
     <input type="text" v-model="fu">
     <input type="text" v-model.number = "f">=<span>{{num}}</span>
     <button @click="suan()">计算</button>
</div>
<script>
    //  Vue.directive('color', function(ele,bind){
    //     console.log(bind.value)
    //     if(bind.value % 2 == 0){
    //     ele.style.background = 'red'
    // }else{
    //     ele.style.background = 'green'
    // }
    // })
    new Vue({
        el:'#app',
        data:{
            arr:[{
                id:1,
                name:'哔哩哔哩',
                xiang:'bilibili',
                lian:'fgfdshngf',
                color:'background-color:green'
            },{                    
                id:2,
                name:'百度',
                xiang:'baidu',
                lian:'jhjhgfd',
                color:'background-color:red'
            },{
                id:3,
                name:'今日头条',
                xiang:'jinritoutiao',
                lian:'thjmmhgf',
                color:'background-color:green'
            }],
            a:'',
            b:'',
            c:'',
            e:'',
            f:'',
            fu:'+',
            num:0,
        },
        methods:{
            fn: function(i){
            var h = this.arr.findIndex(item => item.id == i)
            this.arr.splice(h,1)
          },
          tian:function(){
            this.arr.push({
                id:this.arr.length+1,
                name:this.a,
                xiang:this.b,
                lian:this.c
            })
          },
          suan() {
            
            switch (this.fu){
                case '+':
                   this.num = this.e + this.f
                   break
                case '-':
               this.num = this.e - this.f
               break
                case '*':
               this.num = this.e * this.f
               break
                case '/':
               this.num = this.e / this.f
               break

            }
           console.log(this.fu)
          }
        }
    })
</script>